<template>
  <div>
    <p>
      <vxe-tag content="默认颜色"></vxe-tag>
      <vxe-tag status="primary" content="主要颜色"></vxe-tag>
      <vxe-tag status="success" content="信息颜色"></vxe-tag>
      <vxe-tag status="info" content="信息颜色"></vxe-tag>
      <vxe-tag status="warning" content="警告颜色"></vxe-tag>
      <vxe-tag status="error" content="危险颜色"></vxe-tag>
    </p>

    <p>
      <vxe-tag content="默认图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
      <vxe-tag status="primary" content="主要图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
      <vxe-tag status="success" content="成功图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
      <vxe-tag status="info" content="信息图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
      <vxe-tag status="warning" content="警告图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
      <vxe-tag status="error" content="危险图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
    </p>

    <p>
      <vxe-tag content="默认图标颜色" icon="vxe-icon-info-circle" border></vxe-tag>
      <vxe-tag status="primary" content="主要图标颜色" icon="vxe-icon-info-circle" border></vxe-tag>
      <vxe-tag status="success" content="成功图标颜色" icon="vxe-icon-info-circle" border></vxe-tag>
      <vxe-tag status="info" content="信息图标颜色" icon="vxe-icon-info-circle" border></vxe-tag>
      <vxe-tag status="warning" content="警告图标颜色" icon="vxe-icon-info-circle" border></vxe-tag>
      <vxe-tag status="error" content="危险图标颜色" icon="vxe-icon-info-circle" border></vxe-tag>
    </p>

    <p>
      <vxe-tag content="默认图标颜色" icon="vxe-icon-info-circle" closable></vxe-tag>
      <vxe-tag status="primary" content="主要图标颜色" icon="vxe-icon-info-circle" closable></vxe-tag>
      <vxe-tag status="success" content="成功图标颜色" icon="vxe-icon-info-circle" closable></vxe-tag>
      <vxe-tag status="info" content="信息图标颜色" icon="vxe-icon-info-circle" closable></vxe-tag>
      <vxe-tag status="warning" content="警告图标颜色" icon="vxe-icon-info-circle" closable></vxe-tag>
      <vxe-tag status="error" content="危险图标颜色" icon="vxe-icon-info-circle" closable></vxe-tag>
    </p>
    <p>
      <vxe-tag content="默认图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag status="primary" content="主要图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag status="success" content="成功图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag status="info" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag status="warning" content="警告图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag status="error" content="危险图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
    </p>

    <p>
      <vxe-tag color="gray" content="主要图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="orangered" content="成功图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="orange" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="green" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="blue" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="purple" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="pinkpurple" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="magenta" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="chocolate" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
      <vxe-tag color="cyan" content="信息图标颜色" icon="vxe-icon-info-circle" loading></vxe-tag>
    </p>

    <p>
      <vxe-tag status="warning" content="警告图标颜色" icon="vxe-icon-info-circle" round></vxe-tag>
      <vxe-tag status="error" content="危险图标颜色" icon="vxe-icon-info-circle" round></vxe-tag>
    </p>
  </div>
</template>
